<template>
  <div class="component">
    <app-header title="" :needBack="true">
    </app-header>
    <article class="article">
      <h3 class="title">{{title}}</h3>
      <p class="info"><span>问题分类：{{type}}</span><span>舆情级别：{{level}}</span></p>
      <p class="time">发布时间：{{time | parseTime}}</p>
      <p class="source">来源：{{source}}</p>
      <p class="context">摘要：{{descript}}</p>
      <p class="link">[<a :href="link" target="_blank">查看原文</a>]</p>
    </article>
    <div class="trace-info">
      <p class="trace-title">工作轨迹：</p>
      <x-table :full-bordered="true" style="background-color:#fff;">
        <thead>
          <tr>
            <th v-for="(item, index) in thead" :key="index" :width="item.width">{{item.name}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{item.dealer}}</td>
            <td style="text-align: left;">{{item.time | parseTime}}</td>
            <td>{{item.segment}}</td>
            <td style="text-align: left;">{{item.suggestion}}</td>
          </tr>
        </tbody>
      </x-table>
    </div>
  </div>
</template>
<script>
import AppHeader from '@/components/common/AppHeader'
import { XTable } from 'vux'
const thead = [
  { name: '处理人', width: '15%', },
  { name: '时间', width: '25%', },
  { name: '处理环节', width: '25%', },
  { name: '处理意见', width: '35%', },
]

const tableData = [
  { id: 1, dealer: '李四', time: 1531366304136, segment: '标记为需处理', suggestion: 'aaaaaaa' },
  { id: 2, dealer: '李四', time: 1531366304136, segment: '派单处理', suggestion: 'aaaaaaa' },
  { id: 3, dealer: '李四', time: 1531366304136, segment: '标记为需处理', suggestion: 'aaaaaaa' },
]

export default {
  name: "",
  data() {
    return {
      title: '工单1',
      time: 1531365441101,
      source: '车评网',
      descript: '区块链技术有其匿名性的特点。但在有实名需求的应用场景中，如 AML（Anti-Money Laundering，反洗钱）和 KYC（Know your customer，充分了解你的客户）上，区块链技术需要改善其匿名性。面对政府对区块链领域监管的加强，实名链能保证整个区块链生态系统在透明的机制下运作。有了实名链之后，中小微企业将有更多盈利空间、借贷利息将下降、跨界支付将更为方便。',
      link: 'https://www.baidu.com',
      type: '交通',
      level: '一级',
      thead: thead,
      tableData: tableData,
    }
  },
  components: {
    AppHeader,
    XTable,
  }
}
</script>
<style lang="less" scoped>
  @import '../../assets/less/default.less';
  .article {
    width: 90%;
    margin: auto;
    font-size: .3rem;
    color: #000;
    .title {
      text-align: center;
      margin-bottom: .3rem;
    }
    .time, .source, .link, .info {
      font-size: .25rem;
      margin-bottom: .1rem;
    }
    .info {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .context {
      font-size: .28rem;
      margin-bottom: .4rem;
    }
    .link {
      a {
        text-decoration: underline;
      }
    }
  }
  .trace-info {
    width: 90%;
    margin: auto;
    font-size: .3rem;
    color: #000;
    .trace-title {
      font-size: .25rem;
      margin-bottom: .1rem;
    }
    table {
      font-size: .25rem;
      line-height: .5rem;
    }
  }
</style>
